State manager

Use a State Manager to create different states in your application. For example, you can define the appearance and behavior of a button during different states, such as how the button reacts when a user selects, presses, holds, or releases that button. Kanzi uses its animation system to animate the transitions between states. See Animation system.

Each state manager consists:

• State groups. State groups contain states, define controller properties, and transitions between states in a state group. A typical transition defines a period and interpolation paths between property values of two states. You can define transitions using a general guideline for all properties, using interpolations for each property as specified, or using animation items.
• States. Each state contains a collection of properties that define the appearance and behavior of the node to which you assign the state manager. In each state group only one state can be active at a time. A state can also define interactions either by enabling or disabling controls input using the enabled property, setting the state as a condition for the trigger in trigger settings, or by explicitly defining triggers and actions for each state.
• State objects. State objects define the properties of nodes for a specific state. For example, you can assign a state manager to a Button 2D node which contains a Model node that defines the look of the button. State object sets the properties of the mesh set in the Model node using Target Object Path (./Mesh).

For example, a state manager for a button can contain three state groups: button pressed, button released, and hover over button. Each state group contains enabled and disabled states that through state objects define the appearance and behavior of the button when it is in one of the states, and the transition between the states.

You can define the changes between states by:

• Setting a controller property for the state group and a value for the property for each state. These can be implicit properties such as the Button.Pressed property of the button component nodes. When the property changes, whether as part of the component’s inherent logic or a specified set property action or animation, the state changes as well. See Creating state managers.
• Using Go to State action. You can use this alongside the controller property, however, when controller property changes, it overrides the previously set state.

Easing functions

Use an easing function to make UI elements more lifelike. Because objects in real life never start or stop immediately, the right easing function can help you create a more pleasant user experience. See Using state transitions.

Hover over the image of the easing function to see the type of the animation it creates.

See also

Creating state managers

Using state transitions

Open topic with navigation